<template>
  <div class="wrap">
    <div class="con">
      <div class="tabLeft">
        <ul>
          <li
            :class="tabNum == 0 ? 'seleTabMaskData pseudo' : 'tabMaskData'"
            @click="tabSwitch(0)"
          >师傅信息</li>
          <li
            :class="tabNum == 1 ? 'seleTabUserData pseudo' : 'tabUserData'"
            @click="tabSwitch(1)"
          >发布任务</li>
        </ul>
      </div>
      <div class="tabRight">
        <div class="userInfoCon" v-if="tabNum == 0">
          <h2>师傅信息</h2>
          <span>姓名：</span>
          <p >888888</p>
          <span>任职公司：</span>
          <p>Andrew</p>
          <span>职位：</span>
          <p>999</p>
          <span>联系电话：</span>
          <p>666</p>
          <span>邮箱：</span>
          <p>邮箱：</p>
          <span>毕业院校及专业：</span>
          <p>毕业院校及专业：</p>
          <span>毕业时间：</span>
          <p>毕业时间：</p>
          <span>擅长技术：</span>
          <p>擅长技术：</p>
          <span>备注：</span>
          <p class="p1">备注：</p>
        </div>
        <div class="userDataCon" v-if="tabNum == 1">
          <h2>发布项目学习任务</h2>
          <span>项目名称：</span>
          <p>张三</p>
          <span>技术需求概述：</span>
          <p class="p1"></p>
          <span>标准描述：</span>
          <p class="p1">标准描述</p>
          <span>是否徒弟专属：</span>
          <div class="choose">
              <div class="choose1">
                <div class="box1" @click="hookChoose(0)"></div> 
                <img src="../assets/hook.png" alt="" :class=" hook === 0 ? 'choose1 hook1' : 'choose1 nonehook'">
                <div class="yes">是</div>
              </div>
              <div class="choose2" >
                <div class="box1" @click="hookChoose(1)"></div></div>
                <img src="../assets/hook.png" alt="" :class=" hook === 1 ? 'choose1 hook2' : 'choose1 nonehook'">
                <div class="no">否</div>
          </div>
          <div>
              <el-button type="primary" class="btn">发布</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabNum: 0,
      hook: '',
    };
  },
  methods: {
    tabSwitch(num) {
      this.tabNum = num;
    },
    hookChoose(num) {
      this.hook = num
    }
  }
};
</script>

<style scoped>
/* 外部框架 */
  .wrap {
    width: 100%;
    height: 100%;
  }
  .head {
    width: 100%;
    height: 100px;
    background-color: aqua;
  }
  .con {
    display: flex;
    width: 1200px;
    margin: 6px auto 0;
    box-shadow: 1px 3px 9px #ddd;
    border-radius: 10px;
  }
/*  */

/* 左侧框 */
  .tabLeft {
    background-color: #f2f6f7;
  }
  .tabLeft li {
    position: relative;
    width: 210px;

    padding-left: 25px;
    line-height: 85px;
    font-size: 21px;
    color: #b3bdc9;
    text-align: center;
    list-style: none;
  }
  .tabMaskData {
    background: url("../assets/tabMaskData.png") 50px center no-repeat;
    background-size: 26px 28px;
  }

  .seleTabMaskData {
    color: #0087cf !important;
    background: #fff url("../assets/seleTabMaskData.png") 50px center no-repeat;
    background-size: 26px 28px;
    
  }

  .tabUserData {
    background: url("../assets/tabUserData.png") 50px center no-repeat;
    background-size: 25px 30px;
  }

  .seleTabUserData {
    color: #0087cf !important;
    background: #fff url("../assets/seleTabUserData.png") 50px center no-repeat;
    background-size: 25px 30px;
  }

  .pseudo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    width: 8px;
    height: 85px;
    background-color: #0087cf;
  }
/*  */

/* 右侧框 */
  .tabRight {
    width: 100%;
    background-color: #fff;
  }

  .tabRight h2 {
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 18px;
    margin-left: 20px;
  }
  .userInfoCon,
  .userDataCon {
    margin-top: 20px;
  }
  .userInfoCon span,
  .userDataCon span {
    font-size: 23px;
    color: #5e5e5e;
    line-height: 50px;
    margin-left: 20px;
  }

  .userInfoCon p,
  .userDataCon p {
    width: 300px;
    font-size: 20px;
    margin-bottom: 15px;
    padding: 0 20px;
    line-height: 50px;
    background-color: #f2f6f7;
    color: #5e5e5e;
    margin-left: 20px;

  }
  .p0 {
    height: 50px;
  }
  .p1 {
    height: 200px;
  }
  .btn{
    margin: 20px 0 40px 20px;
    width: 130px;
  }
  .choose{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px;
    
  }
  .choose1 {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-left: -9px;
    margin-top: 20px;
  }
  .choose2 {
    float: right;
    width: 50px;
    height: 50px;
    border-radius: 5px;

    margin: 20px 20px 0 20px;
  }
  .box1{
    margin:15px auto;
    width: 25px;
    height: 25px;
    background-color: #a4adb1;
    border-radius: 5px;
  }
  .hook1{
    position: absolute;
    top: -8px;
    left: 5px;
    width: 50px;
    height: 50px;
  }
  .hook2{
    position: absolute;
    top: -8px;
    left: 147px;
    width: 50px;
    height: 50px;
  }
  .nonehook{
    display: none;
  }
  .yes{
    position: absolute;
    font-size: 30px;
    top: 25px;
    left: 45px;
  }
  .no{
    position: absolute;
    font-size: 30px;
    top: 25px;
    left: 180px;
  }
</style>
